<template>
	<div class="WarningLog">
		<transition mode="out-in">
			<el-table height="100%" :header-cell-style="{
        background: 'rgb(2, 16, 51)',
        color: 'aliceblue',
        border: '0px',
        'text-align': 'center',
        padding: '0px 0px 0px 0px',
        'box-shadow': '0px 0px 30px  rgb(1, 40, 107) inset',
      }" :cell-style="{
        background: 'rgb(2, 16, 51)',
        color: 'aliceblue',
        border: '1px solid rgb(4, 44, 119)',
        'border-right': '0px',
        'border-left': '0px',
        'text-align': 'center',
        padding: '1% 0 0 0',
      }" :data="tableDataFn" style="width: 100%" class="text" empty-text="暂无紧急告警" v-loading="!tableDataFn"
				element-loading-text="暂无紧急告警" element-loading-spinner="el-icon-warning-outline"
				element-loading-background="rgb(2, 16, 51)">

				<template v-for="item in tableColumns">
					<el-table-column :prop="item.prop" :label="item.label" align="center" :width="item.width"
						:key="item.prop">
						<template v-slot="scope">
							<template v-if="item.format == 'ALERT_LEVEL'">
								<div style="text-align: center">
									<el-tag :type="scope.row.levelType" disable-transitions size="mini" effect="dark">
										{{ scope.row[item.prop] }}
									</el-tag>
								</div>
							</template>
							<template v-else>
								<div>
									{{ scope.row[item.prop] }}
								</div>
							</template>
						</template>
					</el-table-column>
				</template>

			</el-table>
		</transition>
	</div>
</template>

<script>
	import {
		fetchData,
		getFaultStatistics
	} from "@/api/index.js";
	import bus from "common/bus.js";
	import tableColumns from "./WarningTableColumns.js";
	import moment from "moment";
	export default {
		data() {
			return {
				postData: {
					opera: "dbalertlist",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				tableData: [],
				tableColumns: tableColumns,
				timerName: "WarningLog",
				timerEventName: "timerWarningLog",
				timerInterval: 1000 * 60,
				timerNamescroll: "WarningLogscroll",
				timerEventNamescroll: "timerWarningLogscroll",
				timerIntervalscroll: 1000 * 3,
			};
		},
		created() {
			this.getData();
			this.timein();
			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$emit("timerNewTodo", {
				name: this.timerNamescroll,
				eventName: this.timerEventNamescroll,
				interval: this.timerIntervalscroll,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				if (msg.isGetData) {
					this.getData();
				}
			});
			bus.$on(this.timerEventNamescroll, (msg) => {
				if (msg.isGetData) {
					if (this.tableData.length > 0) {
						this.tableDataScroll();
					}
				}
			});
		},
		mounted() {
			
		},
		
		computed: {
			tableDataFn() {
				return this.tableData.filter((item) => {
					switch (item.ALERT_LEVEL) {
						case 1:
							item.ALERT_LEVEL = "提醒";
							item.levelType = "info";
							break;
						case 2:
							item.ALERT_LEVEL = "普通";
							item.levelType = "warning";
							break;
						case 3:
							item.ALERT_LEVEL = "紧急";
							item.levelType = "danger";
							break;

						default:
							break;
					}

					return item;
				}).splice(0, 2);
			},
		},
		methods: {
			timein(){
				this.timer = setInterval(() => {
				  // 操作
				  this.getData();
				}, 30000);
				//通过$once来监听定时器，在beforeDestroy钩子可以被清除
				// this.$once('hook:beforeDestroy', () => {
				//   clearInterval(this.timer);
				// })
			},
			getData() {
				// fetchData({
				//     postData : JSON.stringify(this.postData)
				// }).then((res) => {

				//     this.tableData = [];
				//     this.tableData=res.data.slice(0,2)
				//     res.data.forEach(element => {
				//         if(element.RECORD_TIME==null){
				//         element.RECORD_TIME=moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
				//     }

				//     });

				//     // this.tableData=res.data

				// });

				getFaultStatistics().then(async (res) => {
					if (!res) {
						this.tableData = []
						return
					}

					let resultData = [
						...res["Mysql"],
						...res["Oracle"],
						...res["SQLServer"],
						...res["OS"],
						...res["Network"],
					];
					let dangerData = resultData.map((item) => {
						if (item.alertLevel != 3) {
							return
						}
						return {
							IP: item.ip,
							ALERT_LEVEL: item.alertLevel,
							ALERTINFO: item.alertinfo,
							RECORD_TIME: moment(item.recordTime).format("YYYY-MM-DD HH:mm:ss"),
						};
					}).sort((v1, v2) => {
						return new Date(v2.RECORD_TIME) - new Date(v1.RECORD_TIME);
					}).filter(item => item);
					let warningData = resultData.map((item) => {
						if (item.alertLevel != 2) {
							return
						}
						return {
							IP: item.ip,
							ALERT_LEVEL: item.alertLevel,
							ALERTINFO: item.alertinfo,
							RECORD_TIME: moment(item.recordTime).format("YYYY-MM-DD HH:mm:ss"),
						};
					}).sort((v1, v2) => {
						return new Date(v2.RECORD_TIME) - new Date(v1.RECORD_TIME);
					}).filter(item => item);
					if (dangerData.length > 0) {
						this.tableData = [...dangerData];
						// this.tableDataScroll([...dangerData])
					} else {
						// this.tableData = [...warningData];
						// this.tableDataScroll([...warningData])
						this.tableData = []
					}



				});
			},
			tableDataScroll() {
				let splitItem = this.tableData.splice(0, 1)
				this.tableData.push(...splitItem)
				// this.tableData = 

			}
		},
		beforeDestroy() {
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
		},
		watch: {},
	};
</script>

<style scoped>
	@media screen and (max-width: 1365px) and (min-width: 1280px) {
		.WarningLog {
			font-size: 16px;
		}

		.text {
			font-size: 12px;
		}
	}

	@media screen and (max-width: 1600px) and (min-width: 1365px) {
		.WarningLog {
			font-size: 18px;
		}

		.text {
			font-size: 12px;
		}
	}

	@media screen and (max-width: 1920px) and (min-width: 1600px) {
		.WarningLog {
			font-size: 20px;
		}

		.text {
			font-size: 12px;
		}
	}

	@media screen and (max-width: 2560px) and (min-width: 1920px) {
		.WarningLog {
			font-size: 20px;
		}

		.text {
			font-size: 14px;
		}
	}

	@media screen and (min-width: 2560px) {
		.WarningLog {
			font-size: 28px;
		}

		.text {
			font-size: 20px;
		}
	}

	.WarningLog {
		/* height: calc(100% - 22px - 8px); */
		height: 93%;
		text-align: center;
		color: aliceblue;
		padding: 0 4px;
		/* margin: ; */
	}

	.WarningLog>>>.el-table::before {
		height: 0px !important;
	}

	.WarningLog>>>.el-table th,
	.el-table tr {
		background-color: rgb(1, 40, 107);
		box-shadow: 0px 0px 30px rgb(1, 40, 107) inset;
	}

	.WarningLog>>>.el-table {
		background: rgb(2, 16, 51);
		box-shadow: 0px 0px 30px rgb(1, 40, 107) inset;
	}

	.WarningLog>>>.el-table__body-wrapper::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	.WarningLog>>>.el-table__body-wrapper::-webkit-scrollbar-thumb {
		background-color: rgba(4, 44, 119, 0.7);
		border-radius: 3px;
	}
</style>
